<template>
	<div class="TrafficServicesSon">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/TrafficService' }">流量检测服务</el-breadcrumb-item>
			<el-breadcrumb-item>详情</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>详细信息</span>
			</div>
			<el-row :gutter="20">
				<el-col :span="8" :offset="0"> <span>任务序号：</span>{{ data.id }} </el-col>
				<el-col :span="8" :offset="0"> <span>文件名称：</span>{{ data.file_name }} </el-col>
				<el-col :span="8" :offset="0"> <span>检测结果：</span>{{ data.label }} </el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24" :offset="0">
					<span>结果标签：</span><el-tag type="info" size="normal" effect="plain" v-for="(item, i) in data.tags" :key="i">{{ item }}</el-tag>
				</el-col>
			</el-row>
		</el-card>
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>关键信息</span>
			</div>
			<!-- card body -->
			<el-table :data="tableData" border stripe>
				<el-table-column label="序号" width="120">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>

				<el-table-column v-for="col in keyColumns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width"> </el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="text" :loading="keyLoading" size="small" @click="details(scope.row)">查看详情</el-button>
						<!-- <el-button type="text" size="small">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>分析结果</span>
			</div>
			<!-- card body -->
			<el-table :data="data.attack" border stripe>
				<el-table-column label="序号" width="120">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>

				<el-table-column v-for="col in resColumns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width"> </el-table-column>
			</el-table>
		</el-card>
		<el-card shadow="hover" class="box-card" :body-style="{ padding: '20px' }">
			<div slot="header">
				<span>相关分析</span>
			</div>
			<!-- card body -->
			<el-table :data="data.ioc" border stripe>
				<el-table-column label="序号" width="120">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>

				<el-table-column v-for="col in iocColumns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width"> </el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="text" :loading="iocLoading" size="small" @click="details(scope.row)">查看详情</el-button>
						<!-- <el-button type="text" size="small">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>
<script>
export default {
	data() {
		return {
			id: '',
			iocLoading: false,
			keyLoading: false,
			keyColumns: [
				{
					id: 'value',
					label: 'IP',
				},
				{
					id: 'times',
					label: '出现次数',
				},
			],
			resColumns: [
				{
					id: 'timestamp',
					label: '时间戳',
				},
				{
					id: 'source',
					label: '源IP地址：端口',
				},
				{
					id: 'destination',
					label: '目的地IP地址：端口',
				},
				{
					id: 'classtype',
					label: '分类类别',
				},
				{
					id: 'message',
					label: '可以行为详情',
				},
				{
					id: 'protocol',
					label: '对应协议',
				},
			],
			iocColumns: [
				{
					id: 'value',
					label: '关联信息',
				},
				{
					id: 'type',
					label: '类型',
				},
				{
					id: 'apt_name',
					label: '所属组织',
				},
			],
			btnLoading: false,
			tableData: [],
			data: {},
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			this.id = this.$route.query.id
			let data = await this.$api.postHistoryByFile(this.id)
			console.log(data)
			if (data.status === 200) {
				this.data = data.data
				this.tableData = this.data.key_msg
			} else {
				this.data = {}
				this.tableData = []
			}
		},
		details(row) {
			let p = row.value
			// this.loading = true
			let json = {
				value: p,
			}
			this.$api
				.postSearchNext2(json)
				.then((res) => {
					if (res.status === 200) {
						// 第一次查询
						if (res.data.msg) {
							this.$message.success(res.data.msg)
							this.$message.success('请在威胁情报历史记录里查看处理状态')
						} else {
							// 重复查询
							let data = res.data
							this.$router.push({
								path: '/clueSearchDetails',
								query: {
									id: data.iden,
								},
							})
						}
					}
				})
				.finally(() => {
					// this.loading = false
				})
		},
	},
}
</script>
<style lang="less" scoped>
.TrafficServicesSon {
	padding: 20px;
}
.el-row {
	margin-bottom: 20px;
	font-size: 18px;
}
</style>
